<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>创建群聊</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <!-- 样式初始化 自定义文件 -->
    <link rel="stylesheet" href="../css/index.css">
    <!-- 下面所有都是库文件 -->
    <link rel="stylesheet" href="../newtp/lib/weui.min.css">
    <link rel="stylesheet" href="../newtp/css/jquery-weui.css">
    <link rel="stylesheet" href="../newtp/css/theme.css">
    <script src="../newtp/lib/jquery-2.1.4.js"></script>
    <script src="../newtp/lib/fastclick.js"></script>
    <script src="../newtp/js/jquery-weui.js"></script>
<style>
/*最外层*/
.page-container{height: 100%;width: 100%;  overflow: hidden; }
/*顶部*/
.page-top{ height: 50px; top:0; background:#fff; }
.g-back{ float: left; width: 80px;  height: 50px;background: url(../img/g_03.png) center no-repeat; background-size: 18px; }
.g-other{float: right;width: 80px; height: 50px;}
.t-title{ display:block; line-height: 50px; width: 100%;  text-align: center; }
/*内容容器*/
/*内容*/
.page-wrap{ height: 100%; width: 100%; background:#f8f8f8;overflow-y: auto; }
.p-title{position: relative; margin:10px 0; padding:0 18px; width: 100%; height: 55px; border-bottom: 1px solid #f2f2f2; background: #fff; }
.p-title span{position: absolute;width:80px;left:18px;top: 0; line-height: 55px; font-size: 15px; }
.p-title input{display: block;padding-left:80px;width: 100%; height: 100%;text-align: right; line-height: 55px; font-size: 15px; }
.p-qun{ background: #fff; }
.p-qun p{ padding:0 18px; height: 55px; line-height: 55px; font-size: 15px; }
.p-qun ul{ padding:0 15px 15px 15px;  }
.p-qun li{position: relative; display: inline-block; width: 55px; height: 80px;  overflow: hidden;  }
.p-qun li span{display: block; font-size:13px; width: 100%;text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #767676; }
.p-qun img{ display: block; width: 45px;height: 45px; margin:0 auto;  }
.p-qun .p-btn{ width: 45px; margin-left: 5px;}
/*底部信息*/
.botm{  margin-top: 15px;  }
.botm a{  display: block; width: 90%; line-height: 45px; margin:0 auto;border-radius: 5px; background: #2bb1ff; color:#fff; 
  text-align: center; font-size: 15px;}
/*辅助类*/
.color1{ color: #2bb1ff; }
.color2{ color: #c8c8c8; }
.p-close{ position: absolute;top:0;right: 0; width: 15px;height: 15px; background: url(../img/xx_03.png) no-repeat ; background-size: 15px; }
</style>
</head>
<body>
<div class="page-container">
    <div class="weui-tab">
           <!-- 头部 -->
            <div class="weui-navbar page-top">
                    <a  href="javascript:history.back(-1);" class="g-back"></a>                   
                    <span class="t-title">创建群聊</span>  
                    <a  class="g-other"></a>
            </div>
            <!-- 内容区 -->
            <div class="weui-tab__bd page-wrap" >
                    <div class="p-title clear">
                         <span class="left">群名称</span>
                         <input class="right color2" value="和谐号工作交流群">
                    </div>

                    <div class="p-qun">
                          <p>群成员 (<span>4</span>人)</p>
                          <ul>
                                <li><img src="../img/t1.png" ><span>程交金</span><i></i></li>
                                <li><img src="../img/t1.png" ><span>程交金</span><i></i></li>
                                <li><img src="../img/t1.png" ><span>程交金</span><i></i></li>
                                <li><img src="../img/t5.png" ><span>文慈</span><i></i></li>
                                <li class="p-btn" id="add">
                                      <a href="../xiaoxi/qunliao.html"><img src="../img/add_06.png" ></a>
                                </li>
                                <li class="p-btn" id="jian">
                                      <a ><img src="../img/jj_08.png" ></a>
                                </li>
                          </ul>
                    </div>

                    <div class="botm">
                            <a href="../tongxunlu/qunliaoye.html">创建群聊</a>
                    </div>
            </div>
      </div>
</div>
</body>
<script>
function close(){
      $(".p-close").click(function(){
            $(this).parent().remove();
      })
}

$('#jian').click(function(){
      if( $('i').hasClass("p-close")){
           $("i").removeClass("p-close");
      }else{
           $("i").addClass("p-close");
           close();
      } 
})



</script>
</html>